<template>
    <view>
        <z-paging
            ref="paging"
            :refresher-enabled="false"
            v-model="dataList"
            :refresher-out-rate="0.8"
            auto-scroll-to-top-when-reload
            bg-color="#F4F5F9"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            @query="queryList"
        >
            <view slot="top" style="background: #fff; padding-bottom: 20rpx">
                <u-tabs
                    :list="navList"
                    v-if="authority === 'salesman'"
                    @click="changeType"
                    lineColor="#588BF3"
                    :scrollable="false"
                    :activeStyle="{
                        color: '#588BF3',
                        fontWeight: 'bold',
                        transform: 'scale(1.05)',
                    }"
                    :inactiveStyle="{
                        color: '#999',
                        transform: 'scale(1)',
                    }"
                >
                </u-tabs>
            </view>

            <view class="contentWrap">
                <view style="padding: 30rpx 30rpx 40rpx 0">
                    <u--text
                        prefixIcon="edit-pen-fill"
                        iconStyle="font-size: 28px;color:#588BF3"
                        :text="
                            current === '0' ? '添加拜访记录' : '添加记事摘要'
                        "
                        size="18"
                        @click="addLaptop()"
                        color="#588BF3"
                        align="right"
                    ></u--text>
                </view>
                <view
                    class="item"
                    v-for="(item, index) in dataList"
                    :key="index"
                >
                    <view class="item_name flex_wrap row_between row_top">
                        <view
                            class="customerName flex_wrap row_top"
                            @click="toDetail(item)"
                        >
                            <u-icon
                                :name="current === '0' ? 'account' : 'bookmark'"
                                color="#588BF3"
                                size="22"
                            ></u-icon>
                            <text>{{
                                current === "0" ? `拜访客户：` : `摘要标题：`
                            }}</text>
                            <text
                                style="margin-right: 4rpx"
                                v-if="current === '0'"
                                >{{
                                    item.customerName
                                        ? item.customerName
                                        : "暂无"
                                }}</text
                            >
                            <text
                                style="
                                    margin-right: 4rpx;
                                    width: 360rpx;
                                    word-wrap: break-word;
                                "
                                v-if="current !== '0'"
                                >{{ item.title ? item.title : "暂无" }}</text
                            >
                            <text v-if="current === '0'">{{
                                item.customerMobile ? item.customerMobile : ""
                            }}</text>
                        </view>
                        <view
                            style="display: flex; align-items: right"
                            @click="edit(item)"
                        >
                            <u-icon
                                name="edit-pen"
                                color="#588BF3"
                                size="22"
                            ></u-icon>
                        </view>
                    </view>
                    <view class="item_time flex_wrap" @click="toDetail(item)">
                        <u-icon
                            name="calendar"
                            color="#588BF3"
                            size="22"
                        ></u-icon>
                        <u-text
                            :text="
                                current === '0'
                                    ? `拜访时间：${$u.timeFormat(
                                          item.createTime
                                      )}`
                                    : `摘要时间：${$u.timeFormat(
                                          item.createTime
                                      )}`
                            "
                            bold
                            size="28rpx"
                        />
                    </view>
                    <view class="item_detail flex_wrap flex_column">
                        <view class="item_wrap" @click="toDetail(item)">
                            <text class="my_text" space="ensp">{{
                                item.info
                            }}</text>
                        </view>
                        <view class="item_delete" @click="deleteFun(item)">
                            <u--text
                                prefixIcon="trash"
                                iconStyle="font-size: 16px;color:#999999"
                                text="删除此条记录"
                                size="12"
                                color="#999"
                                :margin="10"
                                align="right"
                            ></u--text>
                        </view>
                    </view>
                </view>
            </view>
            <u-modal
                :show="modalShow"
                @confirm="confirm"
                ref="uModal"
                :asyncClose="true"
                content="确定删除该记录？"
                showCancelButton
                center
                @cancel="modalShow = false"
            ></u-modal>
        </z-paging>
    </view>
</template>

<script>
import { list, note_servicedelete } from "@/api/mybookSalesman.js";
export default {
    data() {
        return {
            modalShow: false,
            showDate: false,
            value1: Number(new Date()),
            createTime: "",
            info: "",
            authority: this.$store.getters?.authority,
            current: this.$store.getters?.authority === "salesman" ? "0" : "1",
            inactiveStyle: {
                fontSize: "32rpx",
            },
            activeStyle: {
                fontSize: "32rpx",
                fontWeight: "bold",
                color: "#588BF3",
            },
            navList: [
                {
                    name: "拜访记录",
                    notepadType: "0", //:拜访记录
                },
                {
                    name: "记事摘要",
                    notepadType: "1", //1:记事摘要
                },
            ],
            dataList: [],
            type: "",
            editData: "",
        };
    },
    onShow() {
        this.$refs.paging.reload();
    },
    methods: {
        addLaptop() {
            this.$u.route({
                url: "/pages_balance/laptop/add/index",
                params: {
                    current: this.current,
                    type: "添加",
                },
            });
        },
        edit(item) {
            const data = JSON.stringify(item);
            this.$u.route({
                url: "/pages_balance/laptop/add/index",
                params: {
                    current: this.current,
                    type: "编辑",
                    data,
                },
            });
        },
        toDetail(item) {
            const data = JSON.stringify(item);
            this.$u.route({
                url: "/pages_balance/laptop/detail/index",
                params: {
                    current: this.current,
                    type: "编辑",
                    data,
                },
            });
        },
        deleteFun(item) {
            this.editData = item;
            this.modalShow = true;
        },
        async confirm() {
            const { code, data, msg } = await note_servicedelete(
                this.editData.id
            );
            if (code === 200) {
                const index = this.dataList.findIndex((item) => {
                    return item.id === this.editData.id;
                });
                this.modalShow = false;
                this.dataList.splice(index, 1);
            }
        },
        changeType(e) {
            this.current = e.notepadType;
            this.$refs.paging.reload();
        },
        async queryList(pageNo, pageSize) {
            const params = {
                pageNum: pageNo,
                pageSize: pageSize,
                notepadType: this.current,
                // customerId: this.customerId,
            };
            const result = await list(params);
            const rows = result.data.rows;
            this.$refs.paging.completeByTotal(rows, result.data.total);
        },
    },
};
</script>

<style lang="scss" scoped>
.search {
    padding: 32rpx 28rpx;
}

.contentWrap {
    background: #ffffff;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    margin-top: 30rpx;
    margin: 40rpx 28rpx 0;
    box-sizing: border-box;
    overflow: hidden;
}

.dateWrap {
    width: 100%;
    height: 80rpx;
    box-sizing: border-box;
    background: #f1f1f1;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    line-height: 80rpx;
    padding-left: 40rpx;
    padding-right: 20rpx;
    margin: 20rpx 0;
}

.item {
    padding-left: 40rpx;
    box-sizing: border-box;
    position: relative;
}

.item:before {
    content: "";
    position: absolute;
    width: 2rpx;
    height: 92%;
    left: 32rpx;
    top: 70rpx;
    border-width: 2rpx;
    border-left: 2rpx dashed #d8d8d8;
}

.item::after {
    content: "";
    width: 20rpx;
    height: 20rpx;
    background-color: #5e78ed;
    position: absolute;
    top: 40rpx;
    left: 5%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 0 12rpx rgba(226, 228, 251, 0.8);
}

.item_time {
    // height: 80rpx;
    padding: 0 24rpx;
}
.item_name {
    // min-height: 80rpx;
    padding: 18rpx 24rpx;
}

::v-deep u-textarea {
    background: #f1f1f1;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.item_detail {
    padding: 26rpx 20rpx 20rpx;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    font-size: 28rpx;

    .item_wrap {
        background: #f3f7ff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 20rpx 24rpx;
        box-sizing: border-box;
        min-height: 200rpx;
        color: #333;
    }
    .my_text {
        word-break: break-word; //可以避免文字超出限制
    }
    .item_delete {
        margin-top: 20rpx;
    }
}
.customerName {
    font-weight: bold;
    font-size: 28rpx;
}
</style>
